<template>
  <div class="container">
    <!-- 工具说明 -->
    <h2>IP地址查询工具</h2>
    <label class="feature-label">功能描述:</label>
    <div class="feature-group">
      <ul class="feature-list">
        <li class="feature-item">工具自动显示访问IP，也就是用户本机IP地址，并显示IP地址详细信息，包括归属地、运营商、地理位置等</li>
        <li class="feature-item">用户也可以手动输入IP地址查询详情</li>
        <li class="feature-item">IP信息查询结果来自互联网，本站不保证结果准确性</li>
      </ul>
    </div>

    <!-- IP地址查询输入框 -->
    <div class="query-area">
      <h3>IP地址查询：</h3>
      <input v-model="ipAddress" placeholder="请输入IP地址" type="text">
      <p class="tip">提示：如果你使用了代理，想要查看代理IP信息，请先将本站设置到代理访问名单中</p>
      <button :disabled="loading" @click="queryIp">开始查询</button>
    </div>

    <!-- 查询结果 -->
    <div class="result-area" v-if="ipInfo">
      <h3 class="result-title">查询结果</h3>
      <div v-if="loading" class="loading">
        <div class="loading-animation"></div>
        查询中...
      </div>
      <div v-else>
        <p><span>归属地：</span>{{ ipInfo.region }}, {{ ipInfo.country }}, {{ ipInfo.city }}</p>
        <p><span>运营商：</span>{{ ipInfo.org }}</p>
        <p><span>经纬度：</span>{{ ipInfo.latitude }}, {{ ipInfo.longitude }}</p>
        <p><span>邮编：</span>{{ ipInfo.postal }}</p>
      </div>
    </div>

    <!-- 错误提示 -->
    <div v-if="error" class="error">{{ error }}</div>
  </div>
</template>

<script setup>

const ipAddress = ref('');
const ipInfo = ref(null);
const loading = ref(false);
const error = ref('');

// 获取用户的本机IP地址
const getUserIP = async () => {
  try {
    const response = await axios.get('https://ipapi.co/json/');
    ipAddress.value = response.data.ip;
    ipInfo.value = response.data; // 自动显示本机IP信息
  } catch (err) {
    error.value = '无法获取本机IP地址，请手动输入';
  }
};

// 查询IP地址信息
const queryIp = async () => {
  if (!isValidIp(ipAddress.value)) {
    error.value = '请输入有效的IP地址';
    return;
  }

  loading.value = true;
  error.value = '';

  try {
    const response = await axios.get(`https://ipapi.co/${ipAddress.value}/json/`);
    ipInfo.value = response.data;
  } catch (err) {
    error.value = '查询失败，请检查网络连接或输入的IP地址';
  } finally {
    loading.value = false;
  }
};

// 验证IP地址格式
const isValidIp = (ip) => {
  const regex = /^(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.(25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/;
  return regex.test(ip);
};

// 初始化加载用户的本机IP地址
onMounted(() => {
  getUserIP();
});
</script>

<style scoped>
/* 全局样式 */
.container {
  max-width: 1000px;
  width: calc(100% - 60px);
  margin: 40px auto 10px auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* 工具说明 */
.feature-group {
  margin-bottom: 20px;
}

.feature-label {
  display: inline-block;
  margin-bottom: 5px;
  font-weight: bold;
  border-left: 4px solid #17a2b8;
  padding-left: 10px;
}

.feature-list {
  margin: 0;
  padding: 20px;
  border-radius: 4px;
}

.feature-item {
  margin: 0 0 8px 20px;
  font-size: 14px;
  line-height: 1.5;
  list-style-type: disc; /* 列表符号 */
}

.feature-list::marker {
  color: #007bff; /* 圆点颜色 */
  font-size: 16px; /* 圆点大小 */
}

/* 如果你有具体的列表内容，可以在这里添加 */
.feature-list ul {
  margin: 0;
  padding: 0;
  list-style-type: none; /* 先去掉默认样式 */
}

.feature-list ul li::before {
  content: '•'; /* 添加圆点 */
  color: #007bff; /* 圆点颜色 */
  display: inline-block;
  width: 1em;
  margin-left: -1em;
  font-size: 16px; /* 圆点大小 */
}

h2 {
  margin-bottom: 20px;
  text-align: center;
  font-size: 24px;
  color: #17a2b8;
}

/* 查询区域 */
.query-area {
  margin-bottom: 20px;
}

.query-area h3 {
  margin-bottom: 10px;
}

.query-area input {
  width: calc(100% - 40px);
  margin:0 auto;
  padding: 12px 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
  font-size: 16px;
}

.query-area input:focus {
  border-color: #007bff;
  outline: none;
}

.query-area .tip {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.query-area button {
  width: 120px;
  padding: 12px 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  margin-top: 10px;
}

.query-area button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

/* 查询结果区域 */
.result-area {
  border: 1px solid #e0e0e0;
  background-color: #f8f8f8;
  padding: 20px;
  border-radius: 4px;
  margin-top: 20px;
}

.result-title {
  text-align: center;
  color: #007bff;
  font-size: 20px;
  margin-bottom: 10px;
}

.result-area p {
  margin: 5px 0;
  font-size: 16px;
}

.result-area span {
  font-weight: bold;
}

/* 加载动画 */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}

.loading-animation {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background-color: #007bff;
  animation: spin 1s linear infinite;
  margin-right: 10px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 错误提示 */
.error {
  color: red;
  margin-top: 10px;
  font-size: 14px;
  font-weight: bold;
}
</style>
